<template>
	<view>
		<u-navbar :title="name" :title-size="36"  :title-width="500" title-color="#fff" back-icon-name="arrow-leftward" back-icon-color="#fff"  :background="background" :custom-back="goBack">
		</u-navbar>
		<view class="content">
			<ul>
				<li @click="StimeFlag = true"><label>开始时间: </label><span>{{Stime}}</span></li>
				<li @click="EtimeFlag = true"><label>结束时间: </label> <span>{{Etime}}</span></li>
			</ul>
			<a class="search" @click="search">查询</a>
			<u-picker v-model="StimeFlag" mode="time" @confirm="confirmStime" :params="timeParams"></u-picker>
			<u-picker v-model="EtimeFlag" mode="time" @confirm="confirmEtime" :params="timeParams"></u-picker>
			
			<div v-if="!noData" id="echarts" ref="monitoringCurve" style="width: 100%;height:800rpx;"></div>
			<span v-else class="noData">暂无数据</span>
		</view>
	</view>
</template>

<script>
	import echarts from '../../assets/js/echarts.min.js'
	export default {
		name: 'monitorCurve',
		props: {
			
		},
		 onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
			this.code = option.code
			this.name = option.name
			this.type = option.type
			if(this.type == 'MONITOR_PIPE'){   //管网
				this.formatterText = '管顶线'
			}else if(this.type == 'MONITOR_WATER'){   //积水
				this.formatterText = '报警线'
			}else if(this.type == 'MONITOR_RIVER'){  //河道
				this.formatterText = '警戒水位'
			}
		},
		data() {
			return {
				background: {
					backgroundColor: '#277fe6',
				},
				name:'',
				StimeFlag:false,
				EtimeFlag:false,
				Stime:'',
				Etime:'',
				code:'',
				type:'',
				noData:false,
				timeParams: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true
				},
				formatterText:'汛限水位',
				markNum:0,
				showMark:1, //markLine的显示隐藏
			};
		},
		methods: {
			goBack(){
				uni.navigateBack()
			},
			confirmStime(data){  //点击开始时间控件确定按钮赋值
				this.Stime = `${data.year}-${data.month}-${data.day} ${data.hour}:${data.minute}:${data.second}`
			},
			confirmEtime(data){  //点击开始时间控件确定按钮赋值
				this.Etime = `${data.year}-${data.month}-${data.day} ${data.hour}:${data.minute}:${data.second}`
			},
			search(){
				this.getCurve()
			},
			initChart(xData, sData,unit,show) {
				var myChart = echarts.init(document.getElementById('echarts'));
				var option = {
					grid: {
						top: '14%',
						left: "10%",
						right: "3%"
					},
					tooltip: {
						trigger: "axis",
						position: ['50%', '50%'],
						axisPointer: {
							type: "cross",
							crossStyle: {
								color: "#999"
							}
						}
					},
					dataZoom: {
						show: true,
						height: 14,
						bottom: 10,
						borderColor: 'transparent',
						backgroundColor: '#e2e2e2',
						// 拖拽手柄样式 svg 路径
						handleIcon: 'M512 512m-208 0a6.5 6.5 0 1 0 416 0 6.5 6.5 0 1 0-416 0Z M512 192C335.264 192 192 335.264 192 512c0 176.736 143.264 320 320 320s320-143.264 320-320C832 335.264 688.736 192 512 192zM512 800c-159.072 0-288-128.928-288-288 0-159.072 128.928-288 288-288s288 128.928 288 288C800 671.072 671.072 800 512 800z',
						handleColor: '#aab6c6',
						handleSize: 20,
						handleStyle: {
							borderColor: '#aab6c6',
							shadowBlur: 4,
							shadowOffsetX: 1,
							shadowOffsetY: 1,
							shadowColor: '#e5e5e5'
						},
						start: 0,
						end: 96
					},
					xAxis: {
						type: 'category',
						data: xData,
						axisLine:{
							// show:false,
							lineStyle:{
								color:'#666',
							}
						},
						axisTick:{
							// show:false,
							lineStyle:{
								color:'#666',
							}
						},
						axisLabel: {
							color:'#666',
							formatter: function(params) {
								var newParamsName = ''
								var paramsNameNumber = params.length
								var provideNumber = 10
								var rowNumber = Math.ceil(paramsNameNumber / provideNumber)
								for (let row = 0; row < rowNumber; row++) {
									newParamsName += params.substring(row * provideNumber, (row + 1) * provideNumber) + '\n'
								}
								return newParamsName
							}
						},
					},
					yAxis: {
						type: 'value',
						name:'单位：'+unit,
						axisLine:{
							lineStyle:{
								color:'#666',
							}
						},
						axisTick:{
							lineStyle:{
								color:'#666',
							}
						},
						axisLabel: {
							color:'#666',
						},
						splitLine: { //坐标轴在 grid 区域中的分隔线。
							show: true,
							lineStyle: {
								type: 'dashed'
							}
						}
					},
					series: [{
						data: sData,
						type: 'line',
						itemStyle: {
							normal: {
								color: '#389AF3',
								lineStyle: {
									color: "#389AF3",
									width: 2
								},
								areaStyle: {
									color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
										offset: 0,
										color: 'rgba(58,132,255,0)'
									}, {
										offset: 1,
										color: 'rgba(58,132,255,0.35)'
									}]),
								}
							}
						},
						 markLine: {
							// symbol: 'none',
							silent: true,
							lineStyle: {normal: { type: 'dashed' ,opacity:this.showMark} },
							label: {show:this.showMark,position: 'middle' ,formatter: ''+this.formatterText+': {c}'},
							data: [
							  {
								yAxis: this.markNum,
								lineStyle: { width: 1.656, color: '#ff6367' },
							  },					          
							]
						  },
					}]
				};
				myChart.setOption(option);
			},
			getCurve() {
				uni.showLoading({
				    title: '加载中',
				});
				var param = {
					code: this.code,
					sd:this.Stime,
					ed:this.Etime,
					type:this.type
				};
				this.$api.reqApi.lineCustom(param).then(res => {
					uni.hideLoading(); 
					if(this.type == "MONITOR_RAIN"){
						this.showMark = 0
					}
					
					if(this.type == 'MONITOR_PIPE'){   //管网
						this.markNum = res.meta.over != null ? res.meta.over:''
					}
					// else if(this.type == 'MONITOR_WATER'){   //积水
					// 	this.markNum = 0.3
					// }
					else if(this.type == 'MONITOR_RIVER'){  //河道
						this.markNum = res.meta.alert != null ? res.meta.alert:''
					}else{
						this.markNum = res.meta.limit != null ? res.meta.limit:''
					}
					if(res.times.length>0){
						this.noData = false;
						this.$nextTick(()=>{this.initChart(res.times.reverse(), res.values.reverse(),res.meta.unit)})    
					}else{
						this.noData = true
					}
				})
			},
			
		},
		mounted() {
			console.log(this.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd')); //获取当前时间的年月日 并赋值
			console.log(this.$u.timeFormat(new Date().getTime(), 'hh:MM:ss')); //获取当前时间的时分秒 并赋值
			this.Stime = this.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd') + ' ' + '00:00:00'
			this.Etime = this.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd') + ' ' + this.$u.timeFormat(new Date().getTime(), 'hh:MM:ss')
			this.getCurve()
		}
	}
</script>

<style lang="scss" scoped>
ul{
	padding: 0 30rpx;
	border-bottom: 1px solid #ddd;
	padding-bottom: 30rpx;
	margin-top: 30rpx;
	li{
		margin-top: 20rpx;
		label{
			color: #727272;
			margin-right: 4px;
		}
		label,span{
			font-size: 30rpx;
		}
	}
}
.search{
	text-align: center;
	color: #fff;
	display: block;
	margin-top: 30rpx;
	background-color:  #007AFF;
	width: 200rpx;
	margin: 0 auto;
	line-height: 68rpx;
	border-radius: 4px;
	margin-top: 30rpx;
}
</style>
